<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用props传递数据__基本使用</title>
</head>
<body>

<div id="app">
    <my-component message="来自父组件的数据"></my-component>
</div>
<!--  渲染后的结果：<div id="app"><div>来自父组件的数据</div></div>  -->

<hr>

<div id="app1">
    <my-component warning-text="提示信息"></my-component>
</div>

<hr>


<!-- 这里使用了v-model绑定了父组件的数据parentMessage，当通过输入框任意输入时，子组件接收到的props中的“message”也会实时响应，并更新组件模板。 -->
<div id="app2">
    <input type="text" v-model="parentMessage">
    <dynamic-component :message="parentMessage"></dynamic-component>
</div>


<hr>

<div id="app3">
    <my-component message="[1,2,3]"></my-component>  <!-- 输出长度为7 -->

    <my-component :message="[1,2,3]"></my-component>  <!-- 输出长度为3 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或者参数，
     * 子组件接收后根据参数的不同来渲染不同的内容或执行操作。而这个正向传递数据的过程就是通过props来实现的。
     *
     * 在组件中，子组件使用选项对象props来声明需要从父组件中接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。
     * **/


    //子组件构造一个数组，用于接收来自父级的数据message，并把它在组件模板中渲染。

    Vue.component('my-component', {
        props: ['message'],
        template: "<div>{{ message }}</div>"  //本例子中的message就是通过props从父组件传递过来的，在组件的自定义标签上直接写该props的名称，如果要传递多个数据，只需要在props数组中添加项即可。
    });

    var app = new Vue({
        el: "#app",
    });


    /**
     * props中声明的数据与组件data函数return的数据的主要区别是：props的数据来自于父组件，而data中的是组件自己的数据，作用域是组件本身，
     * 这两种数据都可以在模板template及计算属性computed和方法methods中使用。
     * **/


    /**
     * 由于HTML特性不区分大小写，因此当使用DOM模板时，使用驼峰命名(camelCase)的props名称，需要转变为短横分割命名(kebab-case)！
     * （注意如果使用的是字符串模板，则可以忽略这些限制）
     * **/

    Vue.component("my-component", {
        props: ['warningText'],
        template: "<div>{{ warningText }}</div>"
    });

    var app1 = new Vue({
        el: "#app1",
    });


    /**
     * 有时候传递的数据并不是直接写死的，而是来自父组件的动态数据，这时候可以使用v-bind指令用于动态绑定props的值，
     * 然后当父组件的数据发生变化时，也会传递给子组件，进而完成数据的更新。
     * **/


    Vue.component('dynamic-component', {
        props: ["message"],
        template: "<div>子组件的数据是：{{ message }}</div>"
    });

    var app2 = new Vue({
        el: "#app2",
        data: {
            parentMessage: '',
        }
    });

    /**
     * 注意如果你要直接传递数字、布尔值、数组、对象。而且不使用v-bind指令，那么传递的仅仅只是字符串！！！
     *
     * **/


    //同一个组件使用了两次，区别在于第二个使用了v-bind指令，因此渲染后的结果是第一个是字符串（长度为7），第二个是数组（长度为3）。
    Vue.component("my-component",{
        props:["message"],
        template:"<div>{{ message.length }}</div>"
    });

    var app3 = new Vue({
        el:"#app3",
    })


</script>
</body>
</html>